<template>
  <div class="form">
    <el-form  ref="form1" :model="temp" label-position="center" label-width="120px" style="width: 100%" :rules="rules2"  >
      <el-row>
        <el-col :span="12">
          <el-form-item label="石油设备编号" prop="id" label-width="150px">
            <el-input v-model="temp.id" placeholder="石油设备编号" :disabled="isDisabled" maxlength="64" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="石油设备所属种类" prop="category" label-width="150px" >
            <el-input  v-model="temp.category" placeholder="石油设备所属种类" maxlength="256" clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="石油设备名称" prop="name" label-width="150px">
            <el-input v-model="temp.name" placeholder="石油设备名称"  maxlength="64" clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="石油设备规格" prop="no" label-width="150px">
            <el-input v-model="temp.no" placeholder="石油设备规格"  maxlength="64" clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="石油设备状态" prop="state" label-width="150px">
            <el-input v-model="temp.state" placeholder="石油设备状态"  maxlength="256" clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="石油设备保修期限" prop="limitTime" label-width="150px">
            <el-input v-model="temp.limitTime" placeholder="石油设备保修期限"  clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="石油设备开始使用时间" prop="startTime" label-width="150px">
            <el-input v-model="temp.startTime" placeholder="石油设备开始使用时间"  clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="石油设备报废日期" prop="overTime" label-width="150px">
            <el-input v-model="temp.overTime" placeholder="石油设备保修期限"  clearable  :readonly="isSee"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="正调度石油设备的员工编号" prop="useManId" label-width="150px">
            <el-input v-model="temp.useManId" placeholder="正调度石油设备的员工编号"  clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="石油设备用途描述" prop="useDesc" label-width="150px">
            <el-input v-model="temp.useDesc" placeholder="石油设备用途描述" type="textarea" :readonly="isSee" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="石油设备产地" prop="area" label-width="150px">
            <el-input v-model="temp.area" placeholder="石油设备产地"  clearable :readonly="isSee"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="石油设备其他信息" prop="note" label-width="150px">
            <el-input v-model="temp.note" placeholder="石油设备其他信息" type="textarea"  :readonly="isSee"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" >
      <div style="margin-left: 40% " v-show="dialogType=='see'?false:true">
        <el-button @click="handleReset()" type="primary">
          重置
        </el-button>
        <el-button type="primary" @click="handleSubmit()" >
          提交
        </el-button>
      </div>
    </div>


  </div>

</template>

<script>
  export default {
    name: 'Form',

    computed:{
      isSee(){
        if(this.dialogType2==='see'){
          return true
        }else return false
      },
      isDisabled(){
        if(this.dialogType2==='update' || this.dialogType2==='see'){
          return true
        }else{
          return false
        }
      }
    },

    data(){
      return{
        temp: {
          id:undefined,
          category:undefined,
          name:undefined,
          no:undefined,
          area:undefined,
          limitTime:undefined,
          state:undefined,
          startTime:undefined,
          overTime:undefined,
          useManId:undefined,
          useDesc:undefined,
          note:undefined
        },
        rules2:{
            id:[{required: true,message:'id is required!',trigger:'blur'}],
            category:[{required: true}],
            name:[{required: true}],
            no:[{required: true}],
            area:[{required: true}],
            limitTime:[{required: true}],
            state:[{required:true , message:'status is required',strigger:'blur'}],
            startTime:[{required: true}],
            overTime:[{required: true}],
            useManId:[{required: true}],/*开始这里错了*/
            useDesc:[{required: true}],/*开始这里错了*/
            note:[{required: false}],
        },
        // isDisabled:this.$props.isDisabled,/*让id不要重*/  /*data中的属性优先级 > props中属性的优先级*/
        dialogType2:this.dialogType/*好像必须要*/
      }
    },
    /*父亲界面传值过来*/
    props:{
      dialogType:'',//add、update、see,控制打开哪个组件。
    }
    ,
    methods:{
      handleReset(){/*这里不需要用nextTick*/
        if(this.dialogType2==='add'){/*生效,但是出现bug，新增表单重置后，值写不上去*/
          this.$refs['form1'].resetFields();//会把所有内容都重置，包括disable的ID主键
        }
        else{/*处理编辑*/
          var id=this.temp.id
          this.$refs['form1'].resetFields();
          this.temp.id=id/*实现了重置不会把主键消去*/
        }
      },
      handleSubmit(){
        this.$refs['form1'].validate(valid=>{
          var temp=this.temp
          if(valid){
            this.$emit('submit',{isValid:true,temp})
          }else{
            this.$emit('submit',{isValid:false,temp})
          }
        })

      }
    }

    /*怎么接受*/
  }
</script>

<style scoped>

</style>
